import React, {Component, Fragment} from 'react';
import {Card, message, Modal, Table} from 'antd';
import axios from "../../axios";

import './table.less';


class TableAdvanced extends Component {

    state = {
        dataSource: []
    };

    componentWillMount() {
        this.getData();
    }


    // 动态获取 easy-mock 数据
    getData = () => {
        axios.ajax({
            url: '/basic-table/list'
        }).then(res => {
            // console.log(res);
            if (res.code === 2000) {
                res.data.list.map((item, index) => {
                    item.key = item + index;
                    return null;
                });
                this.setState({
                    dataSource: res.data.list,
                });
                message.success(res.msg);
            } else {
                Modal.error({
                    title: '提示消息',
                    content: res.msg,
                });
            }
        });
    };

    handleChangeSort = (p, f, s) => {
        console.log(s);
        this.setState({
            sortOrder: s.order
        });
    };

    render() {
        const columns = [
            {
                title: 'id',
                width: 180,
                dataIndex: 'id'
            },
            {
                title: '用户名',
                width: 80,
                dataIndex: 'username'
            },
            {
                title: '昵称',
                width: 80,
                dataIndex: 'nickname'
            },
            {
                title: '性别',
                width: 60,
                dataIndex: 'gender',
                render(gender) {
                    return gender === 1 ? '男' : '女'
                }
            },
            {
                title: '年龄',
                width: 60,
                dataIndex: 'age'
            },
            {
                title: '生日',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '状态',
                width: 80,
                dataIndex: 'currState',
                render(currState) {
                    let config = {
                        1: '应届毕业生',
                        2: '屌丝一枚',
                        3: '社会老鸟',
                        4: '高富帅',
                        5: '白富美',
                        6: '创业者',
                        7: '技术大牛',
                        8: '编程小白',
                    };
                    return config[currState];
                }
            },
            {
                title: '爱好',
                width: 80,
                dataIndex: 'hobbies',
                render(hobbies) {
                    let config = {
                        1: '编程',
                        2: '唱歌',
                        3: '跳舞',
                        4: '乐器',
                        5: '游泳',
                        6: '爬山',
                        7: '分享技术',
                        8: '打篮球',
                        9: '健身',
                        10: '游戏',
                    };
                    let index = hobbies.length - 1;
                    return config[hobbies[index]];
                }
            },
            {
                title: '地址',
                width: 180,
                dataIndex: 'address'
            },
        ];
        const columns2 = [
            {
                title: 'id',
                width: 180,
                fixed: 'left',
                dataIndex: 'id'
            },
            {
                title: '用户名',
                width: 80,
                fixed: 'left',
                dataIndex: 'username'
            },
            {
                title: '昵称',
                width: 80,
                dataIndex: 'nickname'
            },
            {
                title: '性别',
                width: 60,
                dataIndex: 'gender',
                render(gender) {
                    return gender === 1 ? '男' : '女'
                }
            },
            {
                title: '年龄',
                width: 60,
                dataIndex: 'age'
            },
            {
                title: '生日',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '年龄',
                width: 60,
                dataIndex: 'age'
            },
            {
                title: '生日',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '年龄',
                width: 60,
                dataIndex: 'age'
            },
            {
                title: '生日',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '年龄',
                width: 60,
                dataIndex: 'age'
            },
            {
                title: '生日',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '年龄',
                width: 60,
                dataIndex: 'age'
            },
            {
                title: '生日',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '状态',
                width: 80,
                fixed: 'right',
                dataIndex: 'currState',
                render(currState) {
                    let config = {
                        1: '应届毕业生',
                        2: '屌丝一枚',
                        3: '社会老鸟',
                        4: '高富帅',
                        5: '白富美',
                        6: '创业者',
                        7: '技术大牛',
                        8: '编程小白',
                    };
                    return config[currState];
                }
            },
            {
                title: '爱好',
                width: 80,
                fixed: 'right',
                dataIndex: 'hobbies',
                render(hobbies) {
                    let config = {
                        1: '编程',
                        2: '唱歌',
                        3: '跳舞',
                        4: '乐器',
                        5: '游泳',
                        6: '爬山',
                        7: '分享技术',
                        8: '打篮球',
                        9: '健身',
                        10: '游戏',
                    };
                    let index = hobbies.length - 1;
                    return config[hobbies[index]];
                }
            },
            {
                title: '地址',
                width: 180,
                fixed: 'right',
                dataIndex: 'address'
            },
        ];
        const columns3 = [
            {
                title: 'id',
                width: 180,
                dataIndex: 'id'
            },
            {
                title: '用户名',
                width: 80,
                dataIndex: 'username'
            },
            {
                title: '昵称',
                width: 80,
                dataIndex: 'nickname'
            },
            {
                title: '性别',
                width: 60,
                dataIndex: 'gender',
                render(gender) {
                    return gender === 1 ? '男' : '女'
                }
            },
            {
                title: '年龄',
                width: 80,
                dataIndex: 'age',
                sorter: (a, b) => (
                    a.age - b.age
                ),
                sortOrder: this.state.sortOrder
            },
            {
                title: '生日',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '状态',
                width: 80,
                dataIndex: 'currState',
                render(currState) {
                    let config = {
                        1: '应届毕业生',
                        2: '屌丝一枚',
                        3: '社会老鸟',
                        4: '高富帅',
                        5: '白富美',
                        6: '创业者',
                        7: '技术大牛',
                        8: '编程小白',
                    };
                    return config[currState];
                }
            },
            {
                title: '爱好',
                width: 80,
                dataIndex: 'hobbies',
                render(hobbies) {
                    let config = {
                        1: '编程',
                        2: '唱歌',
                        3: '跳舞',
                        4: '乐器',
                        5: '游泳',
                        6: '爬山',
                        7: '分享技术',
                        8: '打篮球',
                        9: '健身',
                        10: '游戏',
                    };
                    let index = hobbies.length - 1;
                    return config[hobbies[index]];
                }
            },
            {
                title: '地址',
                width: 180,
                dataIndex: 'address'
            },
        ];

        return (
            <Fragment>
                <Card title={'行固定表格'} className={'card-table'}>
                    <Table bordered={true} scroll={{y:240}}
                           columns={columns}
                           dataSource={this.state.dataSource}
                    />
                </Card>
                <Card title={'列固定表格'} className={'card-table'}>
                    <Table bordered={true} scroll={{x: 1640}}
                           columns={columns2} dataSource={this.state.dataSource}/>
                </Card>
                <Card title={'单列排序表格'} className={'card-table'}>
                    <Table bordered={true} onChange={this.handleChangeSort}
                           columns={columns3} dataSource={this.state.dataSource}/>
                </Card>
            </Fragment>
        );
    }
}

export default TableAdvanced;